<!--摄像头——空间列表-->
<template>
  <div class="ele-body">
    <el-form
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    ><el-card
      shadow="never"
      header="空间管理"
      body-style="padding: 30px 22px;"
    >
      <el-row :gutter="15">
        <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
          <el-form-item label="空间名称:" prop="spaName">
            <el-input
              v-model="form.spaName"
              placeholder="请输入空间名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
          <el-form-item label="空间ID :" prop="spaId">
            <el-input
              v-model="form.spaId"
              placeholder="请输入空间ID"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col style="height: 60px" :xs="12" :sm="12" :lg="6" :xl="6">
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              class="ele-fluid"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
          <el-button
            icon="el-icon-zoom-out"
            size="small"
            type="primary"
            class="colorBlue"
            @click="see()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh-right"
            size="small"
            class="resetting-btn"
            @click="resetting()"
          >
            重置
          </el-button>
        </el-col>
      </el-row>
    </el-card>
      <el-card class="m-top10 p-algin10" shadow="never">
        <table-list
          ref="table"
        />
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import TableList from "./components/table-list";
  export default {
    name: "index",
    components: {TableList},
    data(){
      // 默认表单数据
      const defaultForm = {
      };
      return{
        dateRange:[],
        form: { ...defaultForm }
      }
    },
    methods:{
      see(){
        if(this.dateRange) {
          this.form.startTime = this.dateRange[0]
          this.form.endTime = this.dateRange[1]
        }
        else{
          delete this.form.startTime
          delete this.form.endTime
        }
        this.$refs['table'].reload( this.form)
      },
      resetting(){
        this.dateRange=[]
        this.form= { ...this.defaultForm }
        console.log("resetting======this.form",this.form)
        this.$refs['table'].reload( this.form)
      }
    }
  }
</script>

<style scoped>

</style>

